<template>
    <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keyup.enter="add" />
    </header>
</template>

<script>
import { ref } from 'vue'
export default {
  emits: ['add'],
  setup(props, {emit}) {
    const name = ref('')
    const add = () => {
        if(!name.value) {
            return
        }
        emit('add', name.value)
        name.value = ''
    }  
    return {
      name,
      add
    }
  }
}
</script>

<style>

</style>